<template>
  <div class="about">
    <div class="boxsize Box3D" @click="boxChange('3d')" :class="nowModel=='3d'?'box-3d':'box-2d'"><h1>三维模式</h1></div>
    <div class="boxsize Box2D" @click="boxChange('2d')" :class="nowModel=='2d'?'box-3d':'box-2d'"><h1>二维模式</h1></div>
  </div>
</template>

<style>
</style>

<script>

export default{
  data(){
    return{
      //当前模式
      nowModel:'3d'
    }
  },
  mounted(){

  },
  methods:{
    boxChange(e){
      this.nowModel=e;
    }
  }
}
</script>

<style lang="scss" scoped>
.about {
  width: 1920px;
  height: 937px;
  display: flex;
  position: relative;
  font-size: 36px;
  color: #9815d0;
  overflow: hidden;
  .boxsize{
    transition:all 0.8s;
  }
  .Box3D{
    background: #42b983;
    background-size: 100%;
  }
  .Box2D{
    background: aqua;
    background-size: 100%;
  }
  .box-3d{
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition:all 0.8s;
    position: absolute;
  }
  .box-2d{
    width: 80%;
    height: 99%;
    transform: scale(0.2);
    position: absolute;
    left: 50%;
    top: 35%;
    cursor: pointer;
    transition:all 0.8s;
    z-index: 2;
  }
}
</style>
